<template>
  <view class="index-notice">
    <view class="notice-box" v-for="item in list" :key="item.comment_id">
      <view class="product-view">
        <view class="product-fl">
          <image :src="item.head_url" mode="aspectFill" />
        </view>
        <view class="product-fr">
          <text class="product-title">{{ item.name }}</text>
          <text class="product-info">{{ item.content }}</text>
          <text class="product-time">{{ formatTime(item.created_at) }}</text>
        </view>
      </view>
    </view>
    <!-- <view class="bottom-btn" v-if="list.length">
      <button>清空</button>
    </view> -->
  </view>
</template>

<script>
import { getComments, readAllComment } from '@requests/circle'
import { formatTime } from '@utils/index'
export default {
  name: 'NoticeList',
  data() {
    return {
      list: []
    }
  },
  components: {},
  computed: {},
  created() {
    this.getComments()
  },
  methods: {
    formatTime,
    getComments() {
      getComments().then(res => {
        this.list = res.result.list
        this.readAllComment()
      })
    },
    //读取所有评论
    readAllComment() {
      readAllComment().then(res => {
        console.log(res.result)
      })
    }
  }
}
</script>

<style>
.bottom-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.625rem 0.8rem;
  background: #fff;
  z-index: 99;
}
.bottom-btn button {
  width: 100%;
  background-color: #fff;
  border: 2px solid #006cff;
  border-radius: 12px;
  color: #006cff;
  font-size: 1.02rem;
}
.index-notice {
  background: #fff;
}
.index-notice .notice-box {
  padding: 0.8rem;
  background: #fff;
  border-bottom: 1rpx solid #eceeec;
}
.index-notice .notice-box .product-view {
  overflow: hidden;
}
.index-notice .notice-box .find-a {
  padding: 0.8rem 0;
  font-size: 0.965rem;
}
.index-notice .notice-box .find-a text {
  float: right;
  font-size: 1.02rem;
}
.index-notice .notice-box .product-view .product-fl {
  float: left;
  width: 4rem;
  height: 4rem;
  border: 2px solid #ccc;
  border-radius: 50%;
}
.index-notice .notice-box .product-view .product-fl image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.index-notice .notice-box .product-view .product-fr {
  margin-left: 4.8rem;
}
.index-notice .notice-box .product-view .product-title {
  font-size: 0.9rem;
  color: #006cff;
}
.index-notice .notice-box .product-view .product-info {
  display: block;
  font-size: 0.9rem;
  color: #333;
  margin: 0.3rem 0;
}
.index-notice .notice-box .product-view .product-time {
  font-size: 0.765rem;
  color: #999;
}
</style>
